<template>
  <div class="content">
    <div class="menu">
      <div class="menu-font"
        v-for="(item, index) of tabsName"
        :key="index"
        v-bind:class="{active:isActive}"
        @click="tabsSwitch(index)"
      >
        {{item.name}}
      </div>
    </div>
    <div class="list clear tab-card view">
      <div class="item">
        <img class="item-special" src="http://oss.thebeastshop.com/image/WM15293996962870.09710392259236134550_large.jpg?ver=1529399719088">
        <img class="item-img" src="http://img.thebeastshop.com/image/20170407194744262849.jpg@2e_0o_0l_313h_300w_90q.src">
        <div class="item-product">
          <div class="item-product-title1">对时间说STOP</div>
          <div class="item-product-title2">TriPollar</div>
          <div class="item-product-title3">射频美容仪（白色）</div>
          <div class="item-product-price">￥2,788.00</div>
        </div>
      </div>
      <div class="item">
        <img class="item-special" src="http://oss.thebeastshop.com/image/WM15293996962870.09710392259236134550_large.jpg?ver=1529399719088">
        <img class="item-img" src="http://img.thebeastshop.com/image/20170407194744262849.jpg@2e_0o_0l_313h_300w_90q.src">
        <div class="item-product">
          <div class="item-product-title1">对时间说STOP</div>
          <div class="item-product-title2">TriPollar</div>
          <div class="item-product-title3">射频美容仪（白色）</div>
          <div class="item-product-price">￥2,788.00</div>
        </div>
      </div>
      <div class="item">
        <img class="item-special" src="">
        <img class="item-img" src="http://img.thebeastshop.com/image/20170407194744262849.jpg@2e_0o_0l_313h_300w_90q.src">
        <div class="item-product">
          <div class="item-product-title1">对时间说STOP</div>
          <div class="item-product-title2">TriPollar</div>
          <div class="item-product-title3">射频美容仪（白色）</div>
          <div class="item-product-price">￥2,788.00</div>
        </div>
      </div>
    </div>
    <div class="list clear tab-card">
      <div class="item">
        <img class="item-special" src="http://oss.thebeastshop.com/image/WM15293996962870.09710392259236134550_large.jpg?ver=1529399719088">
        <img class="item-img" src="http://img.thebeastshop.com/image/20170407194744262849.jpg@2e_0o_0l_313h_300w_90q.src">
        <div class="item-product">
          <div class="item-product-title1">2对时间说STOP</div>
          <div class="item-product-title2">TriPollar</div>
          <div class="item-product-title3">射频美容仪（白色）</div>
          <div class="item-product-price">￥2,788.00</div>
        </div>
      </div>
      <div class="item">
        <img class="item-special" src="http://oss.thebeastshop.com/image/WM15293996962870.09710392259236134550_large.jpg?ver=1529399719088">
        <img class="item-img" src="http://img.thebeastshop.com/image/20170407194744262849.jpg@2e_0o_0l_313h_300w_90q.src">
        <div class="item-product">
          <div class="item-product-title1">对时间说STOP</div>
          <div class="item-product-title2">TriPollar</div>
          <div class="item-product-title3">射频美容仪（白色）</div>
          <div class="item-product-price">￥2,788.00</div>
        </div>
      </div>
      <div class="item">
        <img class="item-special" src="">
        <img class="item-img" src="http://img.thebeastshop.com/image/20170407194744262849.jpg@2e_0o_0l_313h_300w_90q.src">
        <div class="item-product">
          <div class="item-product-title1">对时间说STOP</div>
          <div class="item-product-title2">TriPollar</div>
          <div class="item-product-title3">射频美容仪（白色）</div>
          <div class="item-product-price">￥2,788.00</div>
        </div>
      </div>
    </div>
    <div class="list clear tab-card">
      <div class="item">
        <img class="item-special" src="http://oss.thebeastshop.com/image/WM15293996962870.09710392259236134550_large.jpg?ver=1529399719088">
        <img class="item-img" src="http://img.thebeastshop.com/image/20170407194744262849.jpg@2e_0o_0l_313h_300w_90q.src">
        <div class="item-product">
          <div class="item-product-title1">3对时间说STOP</div>
          <div class="item-product-title2">TriPollar</div>
          <div class="item-product-title3">射频美容仪（白色）</div>
          <div class="item-product-price">￥2,788.00</div>
        </div>
      </div>
      <div class="item">
        <img class="item-special" src="http://oss.thebeastshop.com/image/WM15293996962870.09710392259236134550_large.jpg?ver=1529399719088">
        <img class="item-img" src="http://img.thebeastshop.com/image/20170407194744262849.jpg@2e_0o_0l_313h_300w_90q.src">
        <div class="item-product">
          <div class="item-product-title1">对时间说STOP</div>
          <div class="item-product-title2">TriPollar</div>
          <div class="item-product-title3">射频美容仪（白色）</div>
          <div class="item-product-price">￥2,788.00</div>
        </div>
      </div>
      <div class="item">
        <img class="item-special" src="">
        <img class="item-img" src="http://img.thebeastshop.com/image/20170407194744262849.jpg@2e_0o_0l_313h_300w_90q.src">
        <div class="item-product">
          <div class="item-product-title1">对时间说STOP</div>
          <div class="item-product-title2">TriPollar</div>
          <div class="item-product-title3">射频美容仪（白色）</div>
          <div class="item-product-price">￥2,788.00</div>
        </div>
      </div>
    </div>
    <div class="list clear tab-card">
      <div class="item">
        <img class="item-special" src="http://oss.thebeastshop.com/image/WM15293996962870.09710392259236134550_large.jpg?ver=1529399719088">
        <img class="item-img" src="http://img.thebeastshop.com/image/20170407194744262849.jpg@2e_0o_0l_313h_300w_90q.src">
        <div class="item-product">
          <div class="item-product-title1">4对时间说STOP</div>
          <div class="item-product-title2">TriPollar</div>
          <div class="item-product-title3">射频美容仪（白色）</div>
          <div class="item-product-price">￥2,788.00</div>
        </div>
      </div>
      <div class="item">
        <img class="item-special" src="http://oss.thebeastshop.com/image/WM15293996962870.09710392259236134550_large.jpg?ver=1529399719088">
        <img class="item-img" src="http://img.thebeastshop.com/image/20170407194744262849.jpg@2e_0o_0l_313h_300w_90q.src">
        <div class="item-product">
          <div class="item-product-title1">对时间说STOP</div>
          <div class="item-product-title2">TriPollar</div>
          <div class="item-product-title3">射频美容仪（白色）</div>
          <div class="item-product-price">￥2,788.00</div>
        </div>
      </div>
      <div class="item">
        <img class="item-special" src="">
        <img class="item-img" src="http://img.thebeastshop.com/image/20170407194744262849.jpg@2e_0o_0l_313h_300w_90q.src">
        <div class="item-product">
          <div class="item-product-title1">对时间说STOP</div>
          <div class="item-product-title2">TriPollar</div>
          <div class="item-product-title3">射频美容仪（白色）</div>
          <div class="item-product-price">￥2,788.00</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeList',
  data () {
    return {
      tabsName: [{
        name: '专享特惠',
        isActive: true
      }, {
        name: '新品首发',
        isActive: false
      }, {
        name: '野兽家居',
        isActive: false
      }, {
        name: '心意之礼',
        isActive: false
      }],
      isActive: false
    }
  },
  methods: {
    tabsSwitch (tabIndex) {
      var tabCardCollection = document.querySelectorAll('.tab-card')
      var len = tabCardCollection.length
      for (var i = 0; i < len; i++) {
        tabCardCollection[i].style.display = 'none'
        this.tabsName[i].isActive = false
      }
      this.tabsName[tabIndex].isActive = true
      tabCardCollection[tabIndex].style.display = 'block'
    }
  }
}
</script>

<style lang="stylus" scoped>
.content
  margin-bottom: .80rem
  .menu
    display: flex
    justify-content: space-around
    background: #5185b3
    color: #fff
    font-weight: bold
    height: .86rem
    line-height: .86rem
    padding-bottom: .03rem
    .menu-font
      padding: 0 .2rem
    .isActive
      border-bottom: 2px solid #fff
  .list
    z-index: 2
    padding: .4rem .2rem
    display: none
    .item
      width: calc(50% - .4rem)
      float: left
      padding: 0 .2rem
      position: relative
      margin-bottom: .60rem
      .item-special
        position: absolute
        width: 32%
        top: .1rem
        left: .3rem
      .item-img
        width: 100%
      .item-product
        width: 100%
        .item-product-title1
          color: #888
          padding-top: .2rem
          line-height: .4rem
        .item-product-title2
          color: #333
          line-height: .4rem
        .item-product-title3
          color: #333
          line-height: .4rem
        .item-product-price
          color: #096d36
          line-height: .7rem
          font-weight: bold
          font-size: .36rem
  .view
    display: block
  .clear:after
    content: ''
    display: block
    clear: both
</style>
